<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>petshop</title>
    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="./assets/css/reset.less" />

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="./assets/css/common.less" />

    <!-- 页面独立的 -->
    <link rel="stylesheet/less" href="./assets/css/index.less" />
</head>
<body>
    <!-- header -->
    <div class="search-box">
        <input class="glyphicon glyphicon-search" type="search" placeholder="搜索内容">
        <button>搜索</button>
    </div>

    <!-- banner -->
    <div class="box">
        <img src="./assets/images/banner.png">
        <div class="content">
            <h1 class="wow fadeInRight" data-wow-delay="100ms">这个夏天</h1>
            <p class="wow fadeInRight" data-wow-delay="100ms">我们和你一起过</p>
        </div>
    </div>
    
    <!-- function -->
    <div class="function">
        <div class="container">
            <p>精选功能</p>
            <div class="box">
                <div class="item">
                    <img class="wow fadeInRight" data-wow-delay="100ms"src="./assets/images/logo-1.png" alt="">
                    <span><a href="#">宠物医院</a></span>
                </div>
                <div class="item">
                    <img class="wow fadeInRight" data-wow-delay="100ms" src="./assets/images/logo-5.png" alt="">
                    <span><a href="#">疫苗预约</a></span>
                </div>
                <div class="item">
                    <img class="wow fadeInRight" data-wow-delay="100ms"src="./assets/images/logo-2.png" alt="">
                    <span><a href="#">宠物领养</a></span>
                </div>
                <div class="item">
                    <img class="wow fadeInRight" data-wow-delay="100ms"src="./assets/images/logo-3.png" alt="">
                    <span><a href="#">今日事项</a></span>
                </div>
                <div class="item">
                    <img class="wow fadeInRight" data-wow-delay="100ms" src="./assets/images/logo-4.png" alt="">
                    <span><a href="#">更多</a></span>
                </div>
            </div>
        </div>
    </div>

    <!-- picture -->
    <div class="picture">
        <div class="box">
            <div class="left">
                <a href="#"><img class="wow fadeInRight" data-wow-delay="100ms"src="./assets/images/content-1.png" alt=""></a>
            </div>
            <div class="right">
                <div class="top">
                    <a href="#"><img class="wow fadeInRight" data-wow-delay="200ms"src="./assets/images/content-2.png" alt=""></a>
                </div>
                <div class="bottom">
                    <a href="#"><img class="wow fadeInRight" data-wow-delay="300ms" src="./assets/images/content-3.png" alt=""></a>
                </div>
            </div>
        </div>
    </div>


    <!-- footer -->
    <div class="footer">
        <div class="box1">
            <div class="item1">
                <a href="index.html"><img src="./assets/images/footer-1.png" alt=""></a>
                <a href="#">商城</a>
            </div>
            <div class="item1">
                <a href="faxian.html"><img src="./assets/images/footer-2.png" alt=""></a>
                <a href="#">发现</a>
            </div>
            <div class="item2" >
                <a href="./gouwu.html"><img src="./assets/images/footer-3.png" alt=""></a>
                <a href="#">购物车</a>
            </div>
            <div class="item3">
                <a href="./me.html"><img src="./assets/images/footer-4.png" alt=""></a>
                <a class="one" href="#">我的</a>
            </div>
        </div>
    </div>
</body>
</html>
<!-- 解析less的文件 -->
<script src="./assets/js/less.min.js"></script>

<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.repeat.js"></script>

<script>
    new WOW().init()
</script>
